<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./../js/react.js"></script>
  <script src="./../js/react-dom.js"></script>
  <script src="./../js/babel.js"></script>
</head>
<body>
  <div id="box"></div>
  <script type="text/babel">
    // reactJs 提供React.js核心功能代码，虚拟dom，组件
    // React.createElement(type, props, children)

    // ReactDom 提供了与浏览器交互的DOM功能，如dom渲染
    // ReactDom.render(element, container[,callback])
    //  element: 要渲染的内容
    //  container: 要渲染的内容存放的容器
    //  callback: 渲染后的回调函数

    // Demo
    let el = React.createElement('header', {id: 'title'},
              React.createElement('h1', null, 'hello react'),
              React.createElement('p', null, '歡迎react的世界！')
            )

    console.log(el);
    
    /**
     * jsx => js + xml语法糖
     * */


    ReactDOM.render(
      `<header>
        <h1>hello world<h1>
        <p>欢迎来到React的世界</p>
      </header>`,
      document.getElementById('box')
    )
  </script>
</body>
</html>